<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { message } from "@/utils/message";
import DynamicForm from "@/components/DynamicForm/index.vue";
import DynamicTable from "@/components/DynamicTable/index.vue";
import type { DynamicFormInstance } from "@/components/DynamicForm/types";
import type { DynamicTableInstance } from "@/components/DynamicTable/types";
import type { PaginationConfig } from "@/components/DynamicTable/types";
import { useVulnerForm } from "./useVulnerForm";
import { createTableColumns } from "./helps";
import { getVulnerabilityList, getVulnerabilityDetail } from "../servers";
import { router } from "@/router";

import Vulner from "@/assets/svg/vulner.svg?component";
import Vulner2 from "@/assets/svg/vulner2.svg?component";
import Vulner3 from "@/assets/svg/vulner3.svg?component";
import Vulner4 from "@/assets/svg/vulner4.svg?component";

defineOptions({
  name: "",
});

defineProps({
  class: {
    type: String,
    default: "vulner-box-blue",
  },
});

const clazz = "vulner-box-blue";

// 使用表单 hook
const { searchFormData, searchFormConfig, getSearchParams } = useVulnerForm();

// 表单引用
const searchFormRef = ref<DynamicFormInstance>();
const tableRef = ref<DynamicTableInstance>();

// 表格数据
const tableData = ref([]);

const loading = ref(false);

// 分页配置
const pagination = reactive<PaginationConfig>({
  currentPage: 1,
  pageSize: 10,
  total: 12,
  pageSizes: [10, 20, 50],
  layout: "total, sizes, prev, pager, next",
  background: true,
});

// 表格列配置
const tableColumns = createTableColumns();

// 获取漏洞列表
const getPageData = async (searchParams?: any) => {
  loading.value = true;
  try {
    const response: any = await getVulnerabilityList({
      page: pagination.currentPage,
      per_page: pagination.pageSize,
      ...searchParams,
    });

    console.log("API响应:", response);

    // 转换数据格式以匹配表格列配置
    tableData.value = response.data.map((item: any) => ({
      disclosure_date: item.disclosure_date || item.created_at || item.time,
      vuln_name: item.vuln_name || item.title || item.name,
      name: item.vuln_name || item.title || item.name, // 保持name字段用于显示
      des: item.description || item.des,
      origin: item.source || item.origin,
      type: item.severity || item.type,
      yingxiang: item.affected_assets || item.yingxiang || "0",
      hasRead: item.is_read || item.hasRead || false,
      avd_id: item.avd_id || item.id,
    }));

    // 更新分页信息
    if (response.pagination) {
      pagination.total = response.pagination.total || 0;
      pagination.currentPage = response.pagination.page || 1;
      pagination.pageSize = response.pagination.per_page || 20;
    }
  } catch (err) {
    console.error("获取漏洞列表失败:", err);
    message("获取漏洞列表失败", { type: "error" });
    tableData.value = [];
  } finally {
    loading.value = false;
  }
};

// 搜索处理
const handleSearch = (value: any) => {
  console.log("搜索参数:", value);
  pagination.currentPage = 1;
  getPageData(value);
};

// 重置搜索
const handleSearchReset = () => {
  searchFormRef.value?.resetFields();
  pagination.currentPage = 1;
  getPageData();
};

// 分页处理
const handlePageChange = (page: number) => {
  pagination.currentPage = page;
  getPageData();
};

const handleSizeChange = (size: number) => {
  pagination.pageSize = size;
  pagination.currentPage = 1;
  getPageData();
};

// 查看详情
const goVulnerDetail = async (row: any) => {
  try {
    // 如果有 avd_id，可以获取详细信息
    if (row.avd_id) {
      console.log("查看漏洞详情:", row.avd_id);
    }
    router.push("/intelligence/vulnerdetail?avd_id=" + row.avd_id);
  } catch (error) {
    console.error("获取漏洞详情失败:", error);
  }
};

onMounted(() => {
  getPageData();
});
</script>

<template>
  <div class="vulners main-content">
    <div class="vulner-preview">
      <h3 class="vulner-header">情报总览</h3>
      <div class="vulner-four">
        <el-row :gutter="10">
          <el-col
            v-motion
            :xs="12"
            :sm="12"
            :md="6"
            :lg="6"
            :xl="6"
            :offset="0"
          >
            <div class="vulner-box" :class="clazz">
              <h3 class="vulner-value">12</h3>
              <h5 class="vulner-name">情报数量</h5>
              <Vulner class="vulner-box-icon" />
            </div>
          </el-col>
          <el-col
            v-motion
            :xs="12"
            :sm="12"
            :md="6"
            :lg="6"
            :xl="6"
            :offset="0"
          >
            <div class="vulner-box" :class="clazz">
              <h3 class="vulner-value">9</h3>
              <h5 class="vulner-name">未读情报</h5>
              <Vulner2 class="vulner-box-icon" />
            </div>
          </el-col>
          <el-col
            v-motion
            :xs="12"
            :sm="12"
            :md="6"
            :lg="6"
            :xl="6"
            :offset="0"
          >
            <div class="vulner-box" :class="clazz">
              <h3 class="vulner-value">3</h3>
              <h5 class="vulner-name">与我有关</h5>
              <Vulner3 class="vulner-box-icon" />
            </div>
          </el-col>
          <el-col
            v-motion
            :xs="12"
            :sm="12"
            :md="6"
            :lg="6"
            :xl="6"
            :offset="0"
          >
            <div class="vulner-box" :class="clazz">
              <h3 class="vulner-value">6</h3>
              <h5 class="vulner-name">关联资产</h5>
              <Vulner4 class="vulner-box-icon" />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="">
      <el-card shadow="never">
        <div class="search-form-container">
          <DynamicForm
            ref="searchFormRef"
            v-model="searchFormData"
            :form-config="searchFormConfig"
            :gutter="4"
            label-width="80px"
            type="search"
            @search="handleSearch"
            @reset="handleSearchReset"
          />
        </div>
      </el-card>

      <el-card shadow="never" class="mt-4">
        <DynamicTable
          ref="tableRef"
          :data="tableData"
          :columns="tableColumns"
          :loading="loading"
          :pagination="pagination"
          :showToolbar="false"
          border
          @current-page-change="handlePageChange"
          @size-change="handleSizeChange"
        >
          <!-- 操作列插槽 -->
          <template #operation="{ row }">
            <el-button type="primary" size="small" @click="goVulnerDetail(row)">
              查看详情
            </el-button>
          </template>
        </DynamicTable>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card__header) {
}

.search-form-container {
  display: flex;
  flex-direction: column;
  gap: 16px;

  :deep(.el-form) {
    .el-row {
      .el-col {
        padding-left: 4px !important;
        padding-right: 4px !important;
      }
    }

    .el-form-item {
      margin-bottom: 16px;
    }

    .el-form-item__label {
      font-weight: 500;
      color: #606266;
    }
  }
}

.vulners {
  background: white;
  padding-top: 5px;

  .vulner-preview {
    .vulner-header {
      font-size: 18px;
      line-height: 18px;
      padding-left: 10px;
      font-weight: 600;
      margin: 5px 10px 10px 10px;
      border-left: 5px solid #13c2c2;
    }
  }
}

.vulner-four {
  .vulner-box {
    height: 100px;
    padding-top: 15px;
    margin: 0 10px 10px;
    background: white;
    position: relative;

    h3 {
      margin: 0 0 0 20px;
      text-align: center;
      font-size: 30px;
    }
    h5 {
      margin: 10px 0 0 20px;
      text-align: center;
      color: black;
    }
  }

  .vulner-box-success {
    color: #67c23a;
  }

  .vulner-box-primary {
    color: #409eff;
    border-radius: 3px;
  }

  .vulner-box-warning {
    color: #e6a23c;
    border-radius: 3px;
  }

  .vulner-box-blue {
    color: #13c2c2;
    border: 1px solid #dfe2e4;
    border-radius: 3px;
  }
  .vulner-box-purple {
    color: #722ed1;
    border-radius: 3px;
  }

  .vulner-box-icon {
    font-size: 50px;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 25px;
    left: 75px;
  }
}
</style>
